import React, { createContext, useState } from 'react';
import { Alert, Button, Dimensions, SafeAreaView, StatusBar, StyleSheet, Switch, Text, View, SectionList, FlatList, TouchableOpacity } from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

//列表
const FlatListpage = () => {

    const [stateBarheight, setStateBarheight] = useState(0)
    const [isRefresh, setIsRefresh] = useState(false)
    const [selectId, setSelectId] = useState("")

    const loadData = () => {
        setIsRefresh(true)

        setStateBarheight(getStatusBarHeight())

        /* 模拟请求数据 */
        setTimeout(() => {
            setIsRefresh(false)
            Alert.alert('下拉刷新' + stateBarheight)
        }, 2000)

    }


    const DATA = [
        {
            id: '1',
            title: '北京市',
        },
        {
            id: '2',
            title: '上海市',
        },
        {
            id: '3',
            title: '深圳市',
        },
        {
            id: '4',
            title: '广州市',
        },
        {
            id: '5',
            title: '杭州市',
        },
        {
            id: '6',
            title: '南京市',
        },
        {
            id: '7',
            title: '武汉市',
        },
        {
            id: '8',
            title: '西安市',
        },
        {
            id: '9',
            title: '郑州市',
        },
        {
            id: '10',
            title: '合肥市',
        },
    ];


    type ItemProps = { id: string, title: string };

    const Item = ({ id, title }: ItemProps) => (
        <TouchableOpacity
            onPress={() => {
                setSelectId(id)
            }}>
            <View style={[styles.item, { backgroundColor: selectId === id ? "#666666" : "#999999" }]}>
                <Text style={styles.title}>{title}</Text>
            </View>
        </TouchableOpacity>
    );

    return (
        <View style={[styles.root]}>
            <SafeAreaView
                style={{ marginHorizontal: 16 }}>     {/* 适配IOS刘海屏 */}
                <FlatList

                    style={{
                        height: Dimensions.get('window').height - stateBarheight
                    }}

                    /* 赋值数据 */
                    data={DATA}
                    /* 渲染ITEM */
                    renderItem={({ item }) => (
                        <Item id={item.id} title={item.title} />
                    )}

                    /* 设置水平布局模式 */
                    horizontal={false}

                    /* 初始化滚动索引 */
                    initialScrollIndex={0}

                    /* 指定初始渲染数据的数量 */
                    initialNumToRender={4}

                    /* 设置多列展示 无法支持瀑布流 */
                    numColumns={1}

                    /* 列表反转 */
                    inverted={true}

                    /* 如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。 */
                    extraData={selectId}

                    /* 声明项目之间的分隔符 */
                    ItemSeparatorComponent={() => {
                        return <View style={{ backgroundColor: "#999999", height: 1 }}></View>;
                    }}

                    /* 空页面显示 */
                    ListEmptyComponent={() => {
                        return <View><Text>空空如也</Text></View>
                    }}

                    /* 下拉刷新 */
                    refreshing={isRefresh}
                    onRefresh={() => {
                        loadData()
                    }}

                    /* 上拉加载 */
                    onEndReachedThreshold={0.5} /* 声明触底的比率，开始执行加载 */
                    onEndReached={() => {
                        /* 触底之后要执行的操作 */
                        Alert.alert('到底了')
                    }}

                    /* 声明列表的头布局 */
                    ListHeaderComponent={() => {
                        return <View><Text>列表头布局</Text></View>
                    }}

                    /* 声明列表的尾布局 */
                    ListFooterComponent={() => {
                        return <View><Text>列表尾布局</Text></View>
                    }}

                />
            </SafeAreaView>

        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
    },
    header: {
        fontSize: 32,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
    },
})

export default FlatListpage;
